<%--
  Created by IntelliJ IDEA.
  User: Chokeremy
  Date: 2023/7/1
  Time: 9:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>编辑供应商</title>
    <script src="./js/vue.js"></script>
    <script src="./elementui/index.js" type="module"></script>
    <script src="./js/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="./elementui/theme-chalk/index.css">
    <script src="//unpkg.com/element-ui@2.15.13/lib/index.js" ></script>
    <link rel="stylesheet" href="//unpkg.com/element-ui@2.15.13/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-page-header @back="goBack" content="编辑页面">
    </el-page-header>
    <el-alert v-if="showSuccessAlert" title="操作提示：" type="success" show-icon @close="showSuccessAlert = false">
        修改成功！
    </el-alert>
    <el-alert v-if="showErrorAlert" title="操作提示：" type="error" description="修改失败" show-icon @close="showSuccessAlert = false">
    </el-alert>

    <el-form :model="form" :rules="rules" ref="form" label-width="80px" style="width: 500px;margin: 0 auto;margin-top: 100px">
        <el-form-item label="供应商名称" prop="name">
            <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="contactPerson">
            <el-input v-model="form.contactPerson"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="contactNumber">
            <el-input v-model="form.contactNumber"></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱" prop="email">
            <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item label="联系地址" prop="address">
            <el-input v-model="form.address"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="submitForm('form')">提交</el-button>
            <el-button @click="resetForm('form')">重置</el-button>
        </el-form-item>
    </el-form>
</div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            form: {
                supplierId: '',
                name: '',
                contactPerson: '',
                contactNumber: '',
                email: '',
                address: '',
                status: 0,
            },
            rules: {
                name: [
                    {required: true, message: '请输入供应商名称', trigger: 'blur'},
                    {min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'}
                ],
                contactPerson: [
                    {required: true, message: '请输入联系人', trigger: 'blur'},
                    {min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'}
                ],
                email: [
                    {required: true, message: '请输入电子邮箱', trigger: 'blur'},
                    {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
                ],
                contactNumber: [
                    {required: true, message: '请输入联系电话', trigger: 'blur'},
                    {type: 'string', min: 11, max: 11, message: '请输入正确的手机号', trigger: 'blur'}
                ],
                address: [
                    {required: true, message: '请输入联系地址', trigger: 'blur'},
                    {min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'}
                ]
            },
            showSuccessAlert: false,
            showErrorAlert: false
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        $.ajax({
                            url: 'Supplier_infoServlet?tag=editSave',
                            type: 'post',
                            data: this.form,
                            success: function (data) {
                                if (data) {
                                    app.showSuccessAlert = true; // 显示成功提示框
                                } else {
                                    app.showErrorAlert = true;
                                }
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            goBack() {
                parent.vue.iframeUrl = 'supplier.jsp';
            },
            getFormData(){
                // 获取URL参数
                var urlParams = new URLSearchParams(window.location.search);

                // 获取ID参数的值
                var id = urlParams.get('supplierId');
                var _this = this;
                $.get('Supplier_infoServlet?tag=edit&supplierId=' + id, function (data) {console.log(data)
                    _this.form.name = data.name;
                    _this.form.contactPerson = data.contactPerson;
                    _this.form.contactNumber = data.contactNumber;
                    _this.form.email = data.email;
                    _this.form.address = data.address;
                    _this.form.supplierId = data.supplierId;
                })
            }
        },
        mounted() {
            this.getFormData();
        }
    });
</script>
</html>
